<template>
  <el-dialog
    :visible.sync="showBuy"
    width="380px"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
    class="buy_dialog"
    top="30vh"
  >
    <div slot="title" class="title_close">
      <!-- 行情商城 -->
      <div class="title">{{ $t('account_dialog.buy_quo_dialog.57kmiwbckvo0') }}</div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="hide" />
    </div>
    <div class="order_list">
      <div class="order_item">
        <!-- 商品 -->
        <div class="order_item_name">{{$t('account_dialog.buy_quo_dialog.57kmiwbcn3k0')}}</div>
        <div class="order_item_value">{{buyObj.title}}</div>
      </div>
      <div class="order_item">
        <!-- 购买天数 -->
        <div class="order_item_name">{{$t('account_dialog.buy_quo_dialog.57kmiwbcnjs0')}}</div>
        <div class="order_item_value">{{buyObj.day}}{{$t("m.Day")}}</div>
      </div>
      <div class="order_item">
        <!-- 支付金额 -->
        <div class="order_item_name">{{$t('account_dialog.buy_quo_dialog.57kmiwbcnvo0')}}</div>
        <div class="order_item_value">{{buyObj.price}}</div>
      </div>
      <div class="order_item">
        <!-- 支付方式 -->
        <div class="order_item_name">{{$t('account_dialog.buy_quo_dialog.57kmiwbco6c0')}}</div>
        <!-- 证券账户内可用资金 -->
        <div class="order_item_value">{{$t('account_dialog.buy_quo_dialog.57kmiwbcom80')}}</div>
      </div>
    </div>
      <div class="order_current">
        <div>{{buyObj.current}}</div>
        <span>{{asset.balance}}</span>
      </div>
      <!-- 备注：付款成功后将直接扣除您证券账户内的可用资金金额 -->
      <div class="order_tip">{{$t('account_dialog.buy_quo_dialog.57kmiwbcp1s0')}}</div>
      <div class="order_price">
        <!-- 实付金额 -->
        <div>{{$t('account_dialog.buy_quo_dialog.57kmiwbcpkk0')}}<span> {{buyObj.current}} {{buyObj.price}}</span></div>
        <!-- 确认支付 -->
        <button class="order_buy" @click="orderBuy">{{$t('account_dialog.buy_quo_dialog.57kmiwbcpv40')}}</button>
      </div>
  </el-dialog>
</template>
<script>
import {post_quotation_buy} from '@/assets/js/API/active.js';
export default {
  props: {
    showBuy: Boolean,
    buyObj: Object,
    asset: Object,
  },
  data() {
    return {

    }
  },
  methods: {
    hide() {
      this.$emit("hideBuy")
    },
    // 购买行情
    async orderBuy() {
      if(Number(this.buyObj.price) > Number(this.asset.balance)) 
      // 当前账户余额不足，请先进行货币兑换或前往APP进行入金操作
      return this.$message.error(this.$t('account_dialog.buy_quo_dialog.57kmiwbcqec0'));
      const res = await post_quotation_buy({id: this.buyObj.id});
      if(res.code != 1) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.hide();
    },
    // 展开行情购买记录
    showRecord() {
      this.isRecord = true;
    }
  }
}
</script>
<style lang="less">
.order_list {
  .order_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    padding-top: 12px;
    .order_item_name {
      color: @fbSix;
    }
    .order_item_value {
      color: @fff;
    }
  }
}
.order_current {
  color: @fff;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid @LightBorderLine;
  div {
    padding-right: 6px;
  }
}
.order_tip {
  color: @fbSix;
  font-size: 12px;
  padding: 12px 0;
}
.order_price {
  border-top: 1px solid @LightBorderLine;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: @fff;
  font-size: 14px;
  margin-bottom: -30px;
  .order_buy {
    background-color: @hoverColor;
    border: none;
    width: 119px;
    height: 39px;
    margin-right: -30px;
  }
}
</style>